<template>
	<scroll-view scroll-y="true" class="page">
		<view>
			<view class="top">
				<text>聊天机器人</text>
			</view>
			<view v-for="(item,index) in msgs" class="chat-item" :key="index">
				<transition name="move">
					<chat-item :isUser="item.isUser" :msg="item.msg"></chat-item>
				</transition>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="bottom">
				<div class="main">
					<input class="input" placeholder="说些什么吧" v-model="msg" />
					<icon type="search" size="26" @click="sendMessage" placeholder-style="color:#ffffff" />
				</div>
			</view>
		</view>
	</scroll-view>

</template>

<script>
	import chatItem from '@/components/chatItem.vue';
	export default {
		data() {
			return {
				msg: "",
				msgs: []
			}
		},
		methods: {
			sendMessage() {
				let that = this;

				this.msgs.push({
					msg: that.msg,
					isUser: true
				})

				uni.request({
					url: "https://frp-can.top:16688/chat/qyk",
					sslVerify: false,
					data: {
						msg: that.msg
					},
					success: function(res) {
						console.log(res.data.data.content)

						that.msgs.push({
							msg: res.data.data.content,
							isUser: false
						})
					},
					fail: function(res) {
						console.log(res)
						that.msgs.push({
							msg: "请求API失败",
							isUser: false
						})
					},
				})
				this.msg = ""
			}
		},
		components: {
			chatItem
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100vh;
		background-image:url("https://726a-rjsx-8gu72upf0009dab1-1317597728.tcb.qcloud.la/chatBg.png") ;
		background-repeat: no-repeat;

		.top {
			// position: fixed;
			top: 0;
			left: 0;

			display: flex;
			justify-content: center;
			align-items: flex-end;

			width: 100vw;
			height: 10vh;
			background-color: rgba(0, 0, 0, .4);

			text {
				padding-bottom: 25rpx;
				color: #fff;
				font-size: 2.5vh;
			}
		}

		// .chat-item{
		// 	 transition: all 0.5s ease-in-out;
		// }

		.bottom {
			position: fixed;
			z-index: 1;
			bottom: 0px;
			left: 0px;

			display: flex;
			justify-content: center;
			align-items: center;

			width: 100vw;
			height: 7vh;
			background-color: transparent;

			.main {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90vw;
				height: 80%;
				border-radius: 15rpx;
				padding: 0px 20rpx;
				background-color: #262547;

				.input {
					width: 90%;
					height: 100%;
					background-color: rgba(38, 37, 71, .5);
					color: #fff;
				}

				icon {}
			}
		}
	}

	.move-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s ease;
	}

	.move-enter-from,
	.move-leave-to {
		opacity: 0;
	}
</style>